<template>
	<div class="app-container page-group-index">
		<div style="display:flex;justify-content: space-between;">
			<div style="font-size: 24px; margin-bottom:10px ;">用户分群</div>
			<el-col :span="1.5">
				<el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd"
					v-hasPermi="['base:group:add']">创建分群
				</el-button>
			</el-col>
		</div>

		<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
			<!-- <el-form-item label="运行状态" prop="status">
							<el-select v-model="queryParams.status" placeholder="请选择运行状态" clearable size="small">
								<el-option label="不限" value="" />
								<el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel"
									:value="dict.dictValue" />
							</el-select>
						</el-form-item> -->
			<el-form-item label="创建方式" prop="buildType">
				<el-select v-model="queryParams.buildType" placeholder="请选择创建方式" clearable size="small">
					<el-option label="不限" value="" />
					<el-option v-for="dict in buildTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
						:value="dict.dictValue" />
				</el-select>
			</el-form-item>
			<el-form-item label="更新方式" prop="updateType">
				<el-select v-model="queryParams.updateType" placeholder="请选择更新方式" clearable size="small">
					<el-option label="不限" value="" />
					<el-option v-for="dict in updateTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
						:value="dict.dictValue" />
				</el-select>
			</el-form-item>
			<el-form-item label="计算状态" prop="lastCalcStatus">
				<el-select v-model="queryParams.lastCalcStatus" placeholder="请选择最后计算状态" clearable size="small">
					<el-option label="不限" value="" />
					<el-option v-for="dict in lastCalcStatusOptions" :key="dict.dictValue" :label="dict.dictLabel"
						:value="dict.dictValue" />
				</el-select>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8" style="float: right">
			<el-col :span="1.5">
				<el-checkbox v-model="queryParams.onlyMe" style="padding-right: 10px;">仅我创建</el-checkbox>
				<el-input style="width:150px" placeholder="搜索名称/创建者" prefix-icon="el-icon-search"
					v-model="queryParams.displayName">
				</el-input>
			</el-col>
		</el-row>

		<el-table v-loading="loading" :data="groupList" border>
			<el-table-column label="分群名称" align="center" prop="name">
				<template slot-scope="scope">
					<router-link :to="'/group/groupDetail?id=' + scope.row.id" class="linkId"
						:title="scope.row.remark?scope.row.remark:'暂无备注'">
						{{ scope.row.displayName }}
					</router-link>
					<!-- <el-button size="mini" type="text" icon="el-icon-edit"
						:title="scope.row.remark?scope.row.remark:'暂无备注'"></el-button> -->
					<br>
					<span style="font-size:12px">{{ scope.row.name }}</span>
				</template>
			</el-table-column>
			<el-table-column label="人数" align="center" prop="resultNum" />
			<el-table-column label="创建方式" align="center" prop="buildType" :formatter="buildTypeFormat" />
			<el-table-column label="创建者" align="center" prop="createBy" />
			<el-table-column label="更新方式" align="center" prop="updateType" :formatter="updateTypeFormat" />
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<!-- <el-button size="samll" type="text" icon="el-icon-document" @click="handleUpdate(scope.row)"
						v-hasPermi="['base:group:edit']">
					</el-button> -->
					<el-button size="samll" type="text" icon="el-icon-delete"  @click="handleDelete(scope.row)"
						v-hasPermi="['base:group:remove']">
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />

		<!-- 添加或修改用户分群对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="620px" v-if="open" :close-on-click-modal="false"
			append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<div class="ant-modal-body">
					<div class="index__container___2sti8 " data-value="normal" @click="buildUserGroup">
						<div class="index__blockLogo___hnHAh"><img
								src=""
								alt=""></div>
						<div class="index__blockDivideLine___2nKYu"></div>
						<div class="index__blockDesc___EXACq">
							<div class="index__blockDescTitle___J9yjM">规则创建</div>
							<p class="index__blockDescContent___18v9U">使用用户属性及行为数据，筛选出符合条件的用户。如：将“过去 7
								天有登录行为”的用户，划分为“近期登录用户”用户分群</p>
						</div>
					</div>
					<!-- <div class="index__container___2sti8 " data-value="upload" @click="buildUserGroupImport">
						<div class="index__blockLogo___hnHAh"><img
								src=""
								alt=""></div>
						<div class="index__blockDivideLine___2nKYu"></div>
						<div class="index__blockDesc___EXACq">
							<div class="index__blockDescTitle___J9yjM">导入创建</div>
							<p class="index__blockDescContent___18v9U">
								上传包含用户属性的文件与用户列表进行匹配，筛选出符合条件的用户。如：将“线下支付”的用户电话号上传与用户列表电话号进行匹配，匹配结果保留为用户分群</p>
						</div>
					</div> -->
				</div>
			</el-form>
		</el-dialog>

		<el-drawer title="创建用户分群" :visible.sync="drawer" direction="rtl" size="60%" :wrapperClosable="true"
			:before-close="handleClose" custom-class='el-drawer-mode'>
			<el-main style="overflow-y: auto;">
				<el-steps :active="active" process-status='finish' finish-status="finish" :space="200"
					:align-center="true" class="el-steps-mode">
					<el-step title="基础信息"></el-step>
					<el-step title="分群信息"></el-step>
				</el-steps>
				<el-form ref="form" :model="form" :rules="rules" label-width="120px" style="padding:10px;">

					<el-card class="box-card" v-show="active===0">
						<el-form-item label="分群显示名称" prop="displayName">
							<el-input v-model="form.displayName" placeholder="请输入分群显示名称" />
						</el-form-item>
						<!--            <el-form-item label="分群名称" prop="name">
              <el-input v-model="form.name" placeholder="以字母开头, 可包含小写字母、数字、下划线">
                <template slot="prepend">user_group_</template>
              </el-input>
            </el-form-item>-->

						<el-form-item label="更新方式">
							<el-radio-group v-model="form.updateType">
								<el-radio v-for="dict in updateTypeOptions" :key="dict.dictValue"
									:label="dict.dictValue" border>{{ dict.dictLabel }}
								</el-radio>
							</el-radio-group>
							<div v-show="form.updateType==='01'" style="margin-top:10px">
								按
								<el-select v-model="form.taskType" placeholder="请选择执行类型" style="width:100px">
									<el-option label="天" value="day"></el-option>
								</el-select>
								计算 分群每日凌晨更新
							</div>
							<div v-show="form.updateType==='02'" style="margin-top:10px">
								分群生成后，点击“更新”进行数据的更新
							</div>
						</el-form-item>
						<el-form-item label="推送配置" prop="pushId">
							<el-input v-model="form.pushId" placeholder="请输入推送配置" />
						</el-form-item>
						<el-form-item label="备注" prop="remark">
							<el-input v-model="form.remark" placeholder="请输入备注" type="textarea" />
						</el-form-item>
					</el-card>

					<el-card class="box-card" v-show="active===1">
						<div slot="header" class="clearfix">
							<span>在全部用户中，将满足以下条件的用户保存为用户分群</span>
						</div>

						<div class="contentLine" :style="{height:globalHeight, top: 'unset'}">
							<span @click="globalChangeExpressionFun">{{ form.globalStr }}</span>
						</div>


						<div class="itemContent" id="rowContentProperties">
							<div class="content-header"><i class="el-icon-plus"></i>用户属性满足
								<el-link type="primary" :underline="false"
									style="padding-left:20px;float:right;display: inline-block;"
									@click="addUserAttribute">
									<i class="el-icon-plus"></i> <span class="innerContent">筛选</span>
								</el-link>
							</div>

							<div>
								<div class="contentLine" :style="{height:height}" v-show="form.userAttributes.length>1">
									<span @click="changeExpressionFun">{{ form.attributeStr }}</span>
								</div>

								<div class="contentProperties" id="divContentProperties">
									<div v-show="form.userAttributes.length>0">
										<el-form-item label="" style="display: block;padding-left:10px;"
											label-width="0px">
											<div class="attribute-item" v-for="(v,index) in form.userAttributes">
												<el-select :value='v.userAttribute' style="width:120px"
													class="line-item" value-key='id'
													@change="userAttributeChangeFun($event, index)">
													<el-option v-for="dict in userAttributeOptions" :key="dict.id"
														:label="dict.attributeRemark" :value="dict" />
												</el-select>

												<el-select v-model="v.valueExpression" style="width:120px"
													class="line-item">
													<el-option
														v-for="dict in eventPropertysOptions[v.userAttribute.dataType]"
														:key="dict.id" :label="dict.eventItemExpression"
														:value="dict.eventItemCode" />
												</el-select>
												<el-input v-model="v.value1Str" type="text" controls-position="right"
													style="width:100px" class="line-item"
													v-show="v.valueExpression!='between'">
												</el-input>
												<span v-show="v.valueExpression=='between'">
													<el-input v-model="v.value1Str" type="text"
														controls-position="right" style="width:90px"></el-input>与
													<el-input v-model="v.value2Str" type="text"
														controls-position="right" style="width:90px"></el-input>之间
												</span>
												<el-link type="primary" :underline="false"
													style="padding-left:20px;font-size:18px"
													@click="removeRule(form.userAttributes,index)">
													<i class="el-icon-remove"></i>
												</el-link>
											</div>

										</el-form-item>
									</div>
								</div>
							</div>
						</div>

						<div class="itemContent">
							<div class="content-header"><i class="el-icon-plus"></i>用户行为满足
								<el-link type="primary" :underline="false"
									style="padding-left:20px;float:right;display: inline-block;"
									@click="addUserActions">
									<i class="el-icon-plus"></i> <span class="innerContent">筛选</span>
								</el-link>
							</div>

							<div class="contentLine" :style="{height:actionHeight}" v-show="form.userActions.length>1">
								<span @click="changeActionExpressionFun">{{ form.actionStr }}</span>
							</div>

							<div class="contentProperties" id="divContentActions">
								<el-form-item label="" style="display: block;padding-left:10px;"
									v-show="form.userActions.length>0" label-width="0px">
									<div class="action-item" v-for="(v,index) in form.userActions">
										<span class="indexButton">{{indexOptions[index]}}</span>
										<el-date-picker class="line-item" v-model="form.userActions[index].dataRange"
											size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
											range-separator="-" :picker-options="pickerOptions" start-placeholder="开始日期"
											end-placeholder="结束日期"></el-date-picker>
										<el-select class="line-item" v-model="form.userActions[index].doThings"
											style="width:120px" size="small"
											@change="eventPropertyChange(form.userActions[index],index)">
											<el-option label="做过" value="do" />
											<el-option label="未做过" value="undo" />
										</el-select>
										<el-select class="line-item" v-model="form.userActions[index].eventType"
											style="width:120px" @change="eventTypeChange(funnelRuleType,index)"
											value-key="id" size="small">
											<el-option v-for="dict in eventTypeOptions" :key="dict.id"
												:label="dict.eventTypeName" :value="dict" />
										</el-select>
										<el-link type="primary" :underline="false" style="padding-left:20px;"
											@click="addActionEventItem(form.userActions[index].eventItems,index)">
											<i class="el-icon-plus"></i>添加筛选
										</el-link>
										<el-link type="primary" :underline="false"
											style="padding-left:20px;font-size:18px"
											@click="removeActionRule(form.userActions,index)">
											<i class="el-icon-remove"></i>
										</el-link>
										<div class="el-row-mode"
											v-for="(item,itemIndex) in form.userActions[index].eventItems">
											<el-select class="line-item" v-model="item.eventItem" style="width:120px"
												size="small" value-key="id">
												<el-option
													v-for="dict in allEventItemListOpts[form.userActions[index].eventType.id]"
													:key="dict.id" :label="dict.eventItemName" :value="dict" />
											</el-select>
											<el-select class="line-item" v-model="item.eventItemExpression"
												style="width:100px"
												@change="eventPropertyChange(funnelRuleType[index],index)" size="small">
												<el-option
													v-for="dict in eventPropertysOptions[item.eventItem.valueType]"
													:key="dict.id" :label="dict.eventItemExpression"
													:value="dict.eventItemCode" />
											</el-select>
											<el-input class="line-item" size="small" v-model="item.value1Str"
												type="text" controls-position="right" style="width:100px"
												v-show="ruleTypes3Flag==1"></el-input>
											<span v-show="ruleTypes3Flag==2">
												<el-input v-model="item.value1Str" type="text" size="small"
													controls-position="right" style="width:90px"></el-input> 与
												<el-input v-model="item.value2Str" type="text" size="small"
													controls-position="right" style="width:90px"></el-input>之间
											</span>
											<el-link
												@click="removeOrderEventRule(form.userActions[index].eventItems,itemIndex)"
												type="primary" style="padding-left:20px;font-size:18px"
												icon="el-icon-remove"></el-link>
										</div>
										<div class="el-row-mode">
											<el-cascader class="line-item" size="small"
												v-model="form.userActions[index].eventMethod"
												:options="allEventItemMethodOpts[form.userActions[index].eventType.id]"
												:props="{ expandTrigger: 'hover',multiple:false}"
												@change="selectItemMethod(formItem,indexA)"></el-cascader>
											<el-select class="line-item" size="small"
												v-model="form.userActions[index].eventItemExpression"
												style="width:120px"
												@change="eventPropertyChange(funnelRuleType[index],index)">
												<el-option v-for="dict in eventPropertysOptions['02']" :key="dict.id"
													:label="dict.eventItemExpression" :value="dict.eventItemCode" />
											</el-select>
											<el-input class="line-item" v-model="form.userActions[index].value1Str"
												type="text" controls-position="right" style="width:100px" size="small"
												v-show="ruleTypes3Flag==1"></el-input>
											<span v-show="ruleTypes3Flag==2">
												<el-input v-model="form.userActions[index].value1Str" size="small"
													type="text" controls-position="right" style="width:90px">
												</el-input>与
												<el-input v-model="form.userActions[index].value2Str" size="small"
													type="text" controls-position="right" style="width:90px">
												</el-input>之间
											</span>
										</div>
									</div>
								</el-form-item>
							</div>

						</div>

						<div class="itemContent">
							<div class="content-header"><i class="el-icon-plus"></i>行为序列
								<el-link type="primary" :underline="false"
									style="padding-left:20px;float:right;display: inline-block;"
									@click="addActionOrders">
									<i class="el-icon-plus"></i> <span class="innerContent">筛选</span>
								</el-link>
							</div>
							<div>
								<div class="contentLine" :style="{height:orderHeight}"
									v-show="form.userActionOrders.length>1">
									<span @click="changeOrderExpressionFun">{{ form.orderStr }}</span>
								</div>
								<div class="contentProperties" id="divActionOrders">
									<el-row v-show="form.userActionOrders.length>0">
										<el-form-item label="" style="display: block;padding-left:10px;"
											label-width="0px">
											<div class="actionOrder-item" v-for="(v,index) in form.userActionOrders">
												<span class="indexButton">{{indexOptions[index]}}</span>
												<el-date-picker v-model="form.userActionOrders[index].dataRange"
													size="small" style="width: 240px" value-format="yyyy-MM-dd"
													type="daterange" range-separator="-" :picker-options="pickerOptions"
													start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
												依次做过
												<el-link type="primary" :underline="false" style="padding-left:20px;"
													@click="addActionOrderEventItem(form.userActionOrders[index].eventItems,index)">
													<i class="el-icon-plus"></i>添加筛选
												</el-link>
												<el-link type="primary" :underline="false"
													style="padding-left:20px;font-size:18px"
													@click="removeActionOrderRule(form.userActionOrders,index)">
													<i class="el-icon-remove"></i>
												</el-link>
												<div class="el-row-mode actionOrder-item-item"
													v-for="(item,itemIndex) in form.userActionOrders[index].eventItems">
													<span
														class="secondButton">{{indexOptions[index]+''+(itemIndex+1)}}</span>
													<el-select class="little-line-item" v-model="item.eventId"
														style="width:120px" size="small"
														@change="eventTypeChange(funnelRuleType,index)">
														<el-option v-for="dict in eventTypeOptions" :key="dict.id"
															:label="dict.eventTypeName" :value="dict.id" />
													</el-select>
													<el-select v-model="item.eventItem" style="width:120px" size="small"
														value-key="id" class="little-line-item">
														<el-option v-for="dict in allEventItemListOpts[item.eventId]"
															:key="dict.id" :label="dict.eventItemName" :value="dict" />
													</el-select>
													<el-select v-model="item.eventItemExpression" style="width:120px"
														@change="eventPropertyChange(funnelRuleType[index],index)"
														size="small" class="little-line-item">
														<el-option
															v-for="dict in eventPropertysOptions[item.eventItem.valueType]"
															:key="dict.id" :label="dict.eventItemExpression"
															:value="dict.eventItemCode" />
													</el-select>
													<el-input v-model="item.value1Str" type="text" size="small"
														controls-position="right" style="width:100px"
														v-show="ruleTypes3Flag==1"></el-input>
													<span v-show="ruleTypes3Flag==2">
														<el-input v-model="item.value1Str" type="text"
															controls-position="right" style="width:90px"></el-input>与
														<el-input v-model="item.value2Str" type="text" size="small"
															controls-position="right" style="width:90px"></el-input>之间
													</span>
													<el-link
														@click="removeOrderEventRule(form.userActionOrders[index].eventItems,itemIndex)"
														type="primary" style="padding-left:20px;font-size:18px"
														icon="el-icon-remove"></el-link>

												</div>
											</div>

										</el-form-item>
									</el-row>
								</div>
							</div>
						</div>

						<el-form-item label="预估人数" style="margin-top:20px;padding-left:10px;">
							<el-select v-model="form.prevNumber">
								<el-option lael="按全量计算" value="1"  />
								<!-- <el-option label="按1/2抽样计算" value="2" />
								<el-option label="按1/4抽样计算" value="4" />
								<el-option label="按1/8抽样计算" value="8" />
								<el-option label="按1/16抽样计算" value="16" />
								<el-option label="按1/32抽样计算" value="32" />
								<el-option label="按1/64抽样计算" value="64" /> -->
							</el-select>
							<el-button type="primary" @click="preSummaryFun">预估</el-button> <span
								class="caclResult">{{calcGroupNum}}</span>
						</el-form-item>

						<!-- <el-form-item label="限制人数" label-position="top" style="margin-top:20px;padding-left:10px;">
							<el-checkbox v-model="form.limitNumberFlag">限制人群返回数量</el-checkbox>
						</el-form-item> -->
						<el-form-item label="  按  " v-show="form.limitNumberFlag">
							<el-select v-model="form.limitType">
								<el-option label="随机" value="1" />
								<el-option label="属性" value="2" />
							</el-select>
							<el-select v-model="form.limitUserAttribute" v-show="form.limitType==='2'"
								style="width:100px">
								<el-option v-for="dict in userPropertysOptions" :key="dict.id"
									:label="dict.eventItemExpression" :value="dict.eventItemCode" />
							</el-select>
							<el-select v-model="form.sortType" v-show="form.limitType==='2'" style="width:100px">
								<el-option label="数值从大到小" value="1" />
								<el-option label="数值从小到达" value="2" />
							</el-select>
							返回
							<el-input-number v-model="form.limitNumber" :controls="false" style="width:80px">
							</el-input-number>
							人
						</el-form-item>
					</el-card>
				</el-form>

			</el-main>
			<el-footer height="80px">
				<el-col :span="1.5">
					<el-button @click="handleClose">取 消</el-button>
				</el-col>

				<el-col :span="1.5" style="float: right;padding-left:10px">
					<el-button type="primary" @click="changeSteps">{{ active === 1 ? '创 建' : '下一步' }}</el-button>
				</el-col>
				<el-col :span="1.5" style="float: right">
					<el-button type="primary" @click="prevSteps" v-show="active===1">上一步</el-button>
				</el-col>
			</el-footer>
		</el-drawer>
	</div>
</template>

<script>
import {
	listGroup,
	getGroup,
	delGroup,
	addGroup,
	updateGroup,
	addUserGroup,
	calcUserGroupNumber
} from "@/api/base/group";
import {
	getUserAttributeList
} from "@/api/config/userattribute";
import {
	listAllPropertyResult,
	listPropertyByType
} from "@/api/config/property";
import {
	allEventItemsOptions,
	eventTypeOptions
} from "@/api/config/item";
import {
	getAllEventMethodResult
} from "@/api/config/emethod";

export default {
	name: "Group",
	components: {},
	data() {
		return {
			drawer: false,
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 总条数
			total: 0,
			// 用户分群表格数据
			groupList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 更新方式字典
			updateTypeOptions: [],
			// 预估类型字典
			reckonTypeOptions: [],
			// 运行状态字典
			statusOptions: [],
			// 最后计算状态字典
			lastCalcStatusOptions: [],
			// 创建方式字典
			buildTypeOptions: [],
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				name: "",
				updateType: undefined,
				status: undefined,
				onlyMe: '',
				lastCalcStatus: undefined,
				buildType: undefined,
				displayName: ""
			},
			// 表单参数
			form: {
				name: '',
				userAttributes: [],
				userActions: [],
				userActionOrders: [],
				limitNumberFlag: false,
				limitType: '1',
				resultNum: 0,
				buildType: '01',
				globalStr: '且',
				attributeStr: '且',
				actionStr: '且',
				orderStr: '且',
				taskType: 0,
			},
			pickerOptions: {
				shortcuts: [{
					text: '今日',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '昨日',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '本周',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						const day = start.getDay() || 7;
						var newStart = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 1 -
							day);
						picker.$emit('pick', [newStart, end]);
					}
				}, {
					text: '上周',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近一周',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近一个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近三个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
					}
				}]
			},
			// 表单校验
			rules: {
				name: {
					required: true,
					message: '请输入分群名称',
					trigger: 'blur'
				}
			},
			active: 0,
			ruleTypes3Flag: 0,
			userPropertysOptions: [],
			userAttributeOptions: [],
			eventItemMethosOpts: [],
			allEventItemListOpts: {},
			eventPropertysOptions: {},
			allEventItemMethodOpts: {},
			childHeight: 0,
			globalHeight: '186px',
			height: '0px',
			actionHeight: '0px',
			orderHeight: '0px',
			eventTypeOptions: [],
			indexOptions: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
				'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
			],
			calcGroupNum: ''
		};
	},
	computed: {
		maxHeight() {
			let h1 = this.getDocumentHeight('divContentProperties');
			let h2 = this.getDocumentHeight('divContentActions');
			let h3 = this.getDocumentHeight('divActionOrders');
			let height1 = h1.substring(0, h1.indexOf('px'));
			let height2 = h2.substring(0, h2.indexOf('px'));
			let height3 = h3.substring(0, h3.indexOf('px'));
			let glogH = parseFloat(height1) + parseFloat(height2) + parseFloat(height3);
			console.log(`h1: ${h1}, h2: ${h2}, h3: ${h3}`)
			console.log(glogH)
			return '0px'
		}
	},
	created() {
		this.getList();
		this.getEventTypeList();
		this.getAllEventItemsList();
		this.getUserAttributeList();
		this.getDicts("sys_update_type").then(response => {
			this.updateTypeOptions = response.data;
		});
		this.getDicts("sys_normal_disable").then(response => {
			this.reckonTypeOptions = response.data;
		});
		this.getDicts("sys_run_status_type").then(response => {
			this.statusOptions = response.data;
		});
		this.getDicts("sys_calc_status_type").then(response => {
			this.lastCalcStatusOptions = response.data;
		});
		this.getDicts("sys_build_type").then(response => {
			this.buildTypeOptions = response.data;
		});
	},
	methods: {
		/** 查询用户分群列表 */
		getList() {
			this.loading = true;
			listGroup(this.queryParams).then(response => {
				this.groupList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		getEventTypeList() {
			var param = {
				status: 'Y'
			};
			eventTypeOptions(param).then(response => {
				this.eventTypeOptions = response.data;
			});
		},
		getAllEventItemsList() {
			allEventItemsOptions().then(response => {
				this.allEventItemListOpts = response.data;
			});
			listAllPropertyResult().then(response => {
				this.eventPropertysOptions = response.data;
			});
			getAllEventMethodResult().then(response => {
				this.allEventItemMethodOpts = response.data;
			});
		},
		// 更新方式字典翻译
		updateTypeFormat(row, column) {
			return this.selectDictLabel(this.updateTypeOptions, row.updateType);
		},
		// 预估类型字典翻译
		reckonTypeFormat(row, column) {
			return this.selectDictLabel(this.reckonTypeOptions, row.reckonType);
		},
		// 运行状态字典翻译
		statusFormat(row, column) {
			return this.selectDictLabel(this.statusOptions, row.status);
		},
		// 最后计算状态字典翻译
		lastCalcStatusFormat(row, column) {
			return this.selectDictLabel(this.lastCalcStatusOptions, row.lastCalcStatus);
		},
		// 创建方式字典翻译
		buildTypeFormat(row, column) {
			return this.selectDictLabel(this.buildTypeOptions, row.buildType);
		},
		// 用户属性字典翻译
		userAttributeFormat(row, column) {
			return this.selectDictLabel(this.userAttributeOptions, row.userAttribute);
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				name: '',
				userAttributes: [],
				userActions: [],
				userActionOrders: [],
				limitNumberFlag: false,
				limitType: '1',
				resultNum: 0,
				globalStr: '且',
				attributeStr: '且',
				actionStr: '且',
				buildType: '01',
				orderStr: '且'
			};
			this.childHeight = 0;
			this.globalHeight = '180px';
			this.height = '0px';
			this.actionHeight = '0px';
			this.orderHeight = '0px';
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = "怎样创建用户分群?";
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.msgSuccess("功能还未完成，敬请期待！");
			return;
			this.reset();
			const id = row.id || this.ids
			getGroup(id).then(response => {
				this.form = response.data;
				this.open = true;
				this.title = "修改用户分群";
			});
		},
		/** 提交按钮 */
		submitForm: function () {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if (this.form.id != undefined) {
						updateGroup(this.form).then(response => {
							if (response.code === 200) {
								this.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							} else {
								this.msgError(response.msg);
							}
						});
					} else {
						addGroup(this.form).then(response => {
							if (response.code === 200) {
								this.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							} else {
								this.msgError(response.msg);
							}
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			// this.msgSuccess("功能还未完成，敬请期待！");
			// return;
			const ids = row.id || this.ids;
			this.$confirm('是否确认删除用户分群编号为"' + ids + '"的数据项?', "警告", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(function () {
				return delGroup(ids);
			}).then(() => {
				this.getList();
				this.msgSuccess("删除成功");
			}).catch(function () { });
		},


		getUserAttributeList() {
			var param = {
				status: 'Y'
			};
			getUserAttributeList(param).then(response => {
				this.userAttributeOptions = response.data;
			});
		},

		userAttributeChangeFun(userAttribute, index) {

			let array = this.form.userAttributes
			array[index].userAttribute = userAttribute;
			array[index].valueType = userAttribute.dataType;
			array[index].attributeName = userAttribute.attributeName;
			array[index].attributeRemark = userAttribute.attributeRemark;
			array[index].valueExpression = '';
			array[index].value1Str = '';
			array[index].value2Str = '';

		},

		eventPropertyChange(obj, index) {
			if (obj.eventItemExpression == 'between') {
				this.ruleTypes3Flag = 2;
			} else {
				this.ruleTypes3Flag = 1;
			}
		},

		addUserAttribute() {
			let userAttribute = {
				userAttribute: {
					attributeName: '',
					attributeRemark: ''
				},
				valueExpression: '',
				dataType: '',
				valueType: '',
				value1Str: '',
				value2Str: '',
			};
			this.form.userAttributes.push(userAttribute);
			this.getGlobalHeight();
		},

		addUserActions() {
			let userAction = {
				dataRange: [],
				eventItems: [],
				doThings: '',
				eventType: {}
			};
			this.form.userActions.push(userAction);
			this.getGlobalHeight();
		},
		addActionOrders() {
			let actionOrder = {
				dataRange: [],
				eventItems: []
			};
			this.form.userActionOrders.push(actionOrder);
			this.getGlobalHeight();
		},

		getGlobalHeight() {
			this.$nextTick(() => {
				let height = parseInt(this.getDocumentHeight('divContentProperties')) - 10
				let actionHeight = parseInt(this.getDocumentHeight('divContentActions')) - 10
				let orderHeight = parseInt(this.getDocumentHeight('divActionOrders')) - 10
				let globalHeight = height + actionHeight + orderHeight + 186 + 30
				this.height = height + 'px'
				this.actionHeight = actionHeight + 'px'
				this.orderHeight = orderHeight + 'px'
				this.globalHeight = globalHeight + 'px'
			})
		},

		getDocumentHeight(id) {
			let div = document.getElementById(id);
			let height = window.getComputedStyle(div).getPropertyValue('height');
			return height;
		},

		removeRule(array, index) {
			array.splice(index, 1);
			this.getGlobalHeight();
		},
		removeActionRule(array, index) {
			array.splice(index, 1);
			this.getGlobalHeight();
		},
		removeActionOrderRule(array, index) {
			array.splice(index, 1);
			this.getGlobalHeight();
		},

		setDivHeight() {
			let height = this.getDocumentHeight('divContentProperties');

		},

		handleClose() {
			this.drawer = false;
		},

		buildUserGroup() {
			this.open = false;
			this.drawer = true;
			this.form.buildType = '01';
		},

		buildUserGroupImport() {
			this.msgSuccess('拼命完善中，敬请期待!');
			return false;
		},

		prevSteps() {
			this.active = 0;
		},
		changeSteps() {
			if (this.active < 2) {
				this.active++;
			}
			if (this.active === 2) {
				this.active = 1;
				let requestJson = JSON.stringify(this.form);
				addUserGroup({
					requestJson: requestJson
				}).then(response => {
					if (response.code === 200) {
						this.msgSuccess("新增成功");
						this.drawer = false;
						this.getList();
					} else {
						this.msgError(response.msg);
					}
				});
			}

		},
		globalChangeExpressionFun() {
			this.form.globalStr = this.form.globalStr === '且' ? '或' : '且';
		},
		changeExpressionFun() {
			this.form.attributeStr = this.form.attributeStr === '且' ? '或' : '且';
		},

		changeActionExpressionFun() {
			this.form.actionStr = this.form.actionStr === '且' ? '或' : '且';
		},
		changeOrderExpressionFun() {
			this.form.orderStr = this.form.orderStr === '且' ? '或' : '且';
		},

		addActionEventItem(itemArray, index) {
			let eventItem = {
				eventItem: {},
				eventItemExpression: '',
				valueType: '',
				value1Str: '',
				value2Str: '',
			};
			itemArray.push(eventItem);
			this.getGlobalHeight();
		},

		addActionOrderEventItem(itemArray) {
			let eventItem = {
				eventId: '',
				eventItem: {},
				eventItemExpression: '',
				valueType: '',
				value1Str: '',
				value2Str: '',
			};
			itemArray.push(eventItem);
			this.getGlobalHeight();
		},

		removeOrderEventRule(itemArray, index) {
			itemArray.splice(index, 1);
			this.getGlobalHeight();
		},

		preSummaryFun() {
			this.form.name = 'user_group_' + this.form.name;
			let requestJson = JSON.stringify(this.form);
			calcUserGroupNumber({
				requestJson: requestJson
			}).then(response => {
				if (response.code === 200) {
					let num = response.data;
					if (num) {
						this.form.resultNum = num;
						this.calcGroupNum = num + ' 人';
					} else {
						this.calcGroupNum = '所选范围内，没有符合该条件的用户';
					}
				} else {
					this.msgError(response.msg);
				}
			});
		}
	}
};
</script>
<style lang="scss">
.ant-modal-body {
	padding: 24px;
	font-size: 14px;
	line-height: 1.5;
	word-wrap: break-word;

	.index__container___2sti8 {
		background: #fff;
		width: 540px;
		padding: 15px 20px;
		border-radius: 3px;
		border: 1px solid #e9f0f7;
		margin-bottom: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;

		.index__blockLogo___hnHAh {
			width: 73px;
			text-align: center;
		}

		.index__blockDivideLine___2nKYu:before {
			content: "";
			border-left: 1px solid #e0e6ed;
			height: 40px;
			display: block;
			margin: 0 27px;
		}

		.index__blockDesc___EXACq {
			display: inline-block;
			width: 383px;
		}
	}

	.index__container___2sti8:hover {
		border-color: #00bf8a;
	}
}

.page-group-index {
	.itemContent {
		border: 1px solid #e0e6ed;
		padding: 10px 10px;
		margin-left: 30px;
		border-radius: 3px;
		margin-bottom: 15px;
		position: relative;

		.content-header {
			height: 30px;
			line-height: 30px;
		}
	}

	.contentLine {
		position: absolute;
		width: 2px;
		background-color: #d6efe8;
		top: 50px;
		left: 20px;
	}


	.contentLine>span {
		position: relative;
		display: block;
		top: 50%;
		left: -12px;
		right: 0;
		width: auto;
		min-width: 25px;
		height: 25px;
		transform: translateY(-50%);
		border-radius: 3px;
		background: #d6efe8;
		color: #00d166;
		font-size: 14px;
		font-weight: 700;
		line-height: 25px;
		text-align: center;
		cursor: pointer;
		user-select: none;
	}

	.contentProperties {
		width: 99%;
		margin-left: 20px;

		.action-item,
		.attribute-item,
		.actionOrder-item {
			margin: 10px 0 0 10px;

			.actionOrder-item-item {
				margin-top: 5px;
			}
		}

		.el-form-item {
			margin-bottom: 0px;
		}
	}

	.el-drawer {
		overflow: scroll
	}

	.linkId {
		color: #559ff0;
		text-decoration: none;
		background-color: transparent;
		outline: none;
		cursor: pointer;
		transition: color .3s;
	}

	.caclResult {
		margin-left: 10px;
		color: #475669;
		font-size: 14px;
		line-height: 25px;
		font-weight: bold;
	}

	.indexButton {
		display: inline-block;
		background: #2dca93;
		color: #fff;
		width: 20px;
		height: 20px;
		border-radius: 2px;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		position: relative;
		margin-right: 14px;
	}

	.secondButton {
		width: 22px;
		height: 22px;
		line-height: 22px;
		background: #f5faff;
		border-radius: 3px;
		border: 1px solid #d3dce6;
		font-size: 12px;
		color: #99a9bf;
		margin-right: 8px;
	}

	.box-card {
		color: #606266;
		font-size: 14px;

		.el-card__body {
			position: relative;
		}
	}

	.el-steps-mode {
		display: flex;
		justify-content: center;
	}

	.el-drawer-mode {
		min-width: 905px;
	}

	.el-row-mode {
		margin-left: 34px;
	}

	.line-item {
		margin-right: 10px;
	}

	.little-line-item {
		margin-right: 6px;
	}
}

// *, *:before, *:after{
// 	font-size: 12px;
// }
</style>
